### 作业1：完成基本Vue指令案例  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue指令综合案例</title>
    <style>
        .active { background: #f00; color: white; }
        .inactive { background: #0f0; }
    </style>
</head>
<body>
    <div id="app">
        <h1>{{ title }}</h1>

        <!-- v-model双向绑定 -->
        <input type="text" v-model="searchKeyword" placeholder="输入搜索关键词">

        <!-- v-if和v-else条件渲染 -->
        <p v-if="users.length === 0">暂无用户数据</p>
        <ul v-else>
            <!-- v-for循环渲染 -->
            <li v-for="user in filteredUsers" 
                :key="user.id" 
                :class="user.isActive ? 'active' : 'inactive'" 
                @click="toggleActive(user)">
                {{ user.name }}（{{ user.age }}岁）
                <span v-show="user.age >= 18">成年人</span>
                <span v-show="user.age < 18">未成年人</span>
            </li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                title: '用户信息列表',
                searchKeyword: '',
                users: [
                    { id: 1, name: '张三', age: 20, isActive: true },
                    { id: 2, name: '李四', age: 17, isActive: false },
                    { id: 3, name: '王五', age: 25, isActive: true }
                ]
            },
            computed: {
                filteredUsers() {
                    return this.users.filter(user => 
                        user.name.includes(this.searchKeyword)
                    );
                }
            },
            methods: {
                toggleActive(user) {
                    user.isActive = !user.isActive;
                }
            }
        });
    </script>
</body>
</html>
```

---

### 作业2：完成学生列表案例  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
</head>
<body>
    <div id="app">
        <table border="1" width="800">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="student in students" :key="student.id">
                    <td>{{ student.id }}</td>
                    <td>{{ student.name }}</td>
                    <td>{{ student.age }}</td>
                    <td>{{ student.gender }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                students: []
            },
            mounted() {
                this.loadStudents();
            },
            methods: {
                loadStudents() {
                    axios.get('http://localhost:8080/api/students')
                        .then(response => {
                            this.students = response.data;
                        })
                        .catch(error => {
                            console.error('数据加载失败:', error);
                        });
                }
            }
        });
    </script>
</body>
</html>


---

### 作业3：完成学生搜索案例  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生搜索</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="keyword" placeholder="输入学生姓名">
        <table border="1" width="800">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="student in filteredStudents" :key="student.id">
                    <td>{{ student.id }}</td>
                    <td>{{ student.name }}</td>
                    <td>{{ student.age }}</td>
                    <td>{{ student.gender }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                keyword: '',
                allStudents: []
            },
            computed: {
                filteredStudents() {
                    return this.allStudents.filter(student => 
                        student.name.toLowerCase().includes(this.keyword.toLowerCase())
                    );
                }
            },
            mounted() {
                axios.get('http://localhost:8080/api/students')
                    .then(response => {
                        this.allStudents = response.data;
                    })
                    .catch(error => {
                        console.error('数据加载失败:', error);
                    });
            }
        });
    </script>
</body>
</html>